<template>
  <div class="hello">
    <Breadcrumb name1="首页" name2="常用药品" />
    <el-container>
      <el-footer style="text-align: center ;font-size: 25px ; line-height: 50px ">常用药品管理</el-footer>
      <el-header style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
             border-radius:4px ">
        <div class="mo">

          <el-input class="input1"
                    placeholder="请输入药品编号"
                    v-model="PageNation.pageid"
                    clearable>
          </el-input>
          <el-input class="input1"
                    placeholder="请输入药品名称"
                    v-model="PageNation.pagename"
                    clearable>
          </el-input>
          <el-input class="input1"
                    placeholder="请输入药品规格"
                    v-model="PageNation.pageage"
                    clearable>
          </el-input>

          <div class="an">
            <el-button @click="getAll">查询</el-button>
            <el-button type="primary" @click="newitem">新建</el-button>
          </div>
        </div>

      </el-header>
      <!--中间表单区域-->
      <el-main style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
        <el-table
          :data="userList"
          stripe
          style="width: 100%">
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column
            prop="id"
            label="编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="cgnName"
            label="药品名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="userId"
            label="规格">
          </el-table-column>
          <el-table-column
            prop="cgnTel"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="cgnAddress"
            label="存放位置">
          </el-table-column>
          <el-table-column label="操作" row-style="text-align: center">
            <!-- 操作按钮 -->
            <template class="mubtn" v-slot:default="scope">
              <el-button type="primary" icon="el-icon-edit" @click="updata(scope.row)"></el-button>
              <el-button type="danger" icon="el-icon-delete" @click="delate(scope.row)"></el-button>
            </template>


          </el-table-column>
        </el-table>

        <!--编辑-->
        <el-dialog
          title="编辑药品"
          :visible.sync="dialogVisible11"
          width="50%">
          <!-- 内容主体 -->
          <el-form :model="addForm" :rules="addFormRules" ref="ruleFormRef"
                   label-width="70px">
            <el-form-item label="编号" prop="id">
              <el-input class="input2" v-model="addForm.id"></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="cgnName">
              <el-input class="input2" v-model="addForm.cgnName"></el-input>
            </el-form-item>
            <el-form-item label="规格" prop="userId">
              <el-input class="input2" v-model="addForm.userId"></el-input>
            </el-form-item>
            <el-form-item label="数量" prop="cgnTel">
              <el-input class="input2" v-model="addForm.cgnTel"></el-input>
            </el-form-item>
            <el-form-item label="位置" prop="cgnAddress">
              <el-input class="input2" v-model="addForm.cgnAddress"></el-input>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible11 = false">取 消</el-button>
    <el-button type="primary" @click="handleupdate">确 定</el-button>
  </span>
        </el-dialog>
        <!--  新增-->

        <el-dialog
          title="添加药品"
          :visible.sync="dialogVisible"
          style='margin-left: 20px'
        >
          <!-- 内容主体 -->
          <el-form :model="addForm" :rules="addFormRules" ref="ruleFormRef"
                   label-width="70px">

            <el-form-item label="编号" prop="id">
              <el-input class="input2" v-model="addForm.id"></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="cgnName">
              <el-input class="input2" v-model="addForm.cgnName"></el-input>
            </el-form-item>
            <el-form-item label="规格" prop="userId">
              <el-input class="input2" v-model="addForm.cgnTel"></el-input>
            </el-form-item>
            <el-form-item label="数量" prop="cgnTel">
              <el-input class="input2" v-model="addForm.userId"></el-input>
            </el-form-item>
            <el-form-item label="位置" prop="cgnAddress">
              <el-input class="input2" v-model="addForm.cgnAddress"></el-input>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleAdd">确 定</el-button>
  </span>
        </el-dialog>
        <!-- 底部导航栏-->

        <div class="block">
          <span class="demonstration">导航</span>
          <!--                    <el-pagination-->
          <!--                            @size-change="handleSizeChange"-->
          <!--                            @current-change="handleCurrentChange"-->
          <!--                            :current-page.sync="PageNation.current"-->
          <!--                            :page-size="PageNation.size"-->
          <!--                            layout="prev, pager, next, jumper"-->
          <!--                            :total="PageNation.toal">-->
          <!--                    </el-pagination>-->


          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="PageNation.current"
            :page-sizes="[5, 10, 50, 100]"
            :page-size="PageNation.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="PageNation.total">
          </el-pagination>
        </div>

      </el-main>
      <el-footer style="text-align: center;font-size: 25px;line-height:60px" >By ShanYao</el-footer>
    </el-container>
  </div>
</template>

<script>
  import { userAddFormRulesMixin } from '@/common/mixin.js'
  import Breadcrumb from 'components/content/breadcrumb/Breadcrumb'
  import axios from "axios";

  export default {
    created() {
      this.getAll()
    },
    components: {
      Breadcrumb
    },
    data() {
      return {

        PageNation:{
          current:1,//当前页码
          size:10,//每页显示数量
          total:0,//一共数量
          pageid:null,
          pagename: '',
          pageage: null
        },
        addFormRules: {
          id: [
            {required: true, message: 'id', trigger: 'blur'},
            {min: 1, max: 4, message: '药品编号在1-4位数之间', trigger: 'blur'}
          ],
          cgnName: [
            {required: true, message: '请输入药品名称', trigger: 'blur'},
            {min: 2, max: 23, message: '药品名称在1-23个字符之间', trigger: 'blur'}
          ],
          userId: [
            {required: true, message: '请输入药品数量', trigger: 'blur'},
            {min: 1, max: 5, message: '药品数量在1-99999之间', trigger: 'blur'}
          ],
          cgnTel: [
            {required: true, message: '请输入药品规格', trigger: 'blur'},
            {min: 1, max: 10, message: '请输入1-10个字符之间', trigger: 'blur'}
          ],
          cgnAddress: [
            {required: true, message: '请输入药品位置', trigger: 'blur'},
            {min: 6, max: 50, message: '字段长度在6-50个字符之间', trigger: 'blur'}
          ],

        },
        dialogVisible: false,
        dialogVisible11:false,
        total: 0,
        userList: [],
        param:'',
        addForm: {
          id: null,
          userId: null,
          cgnName: '12',
          cgnAddress: '',
          cgnTel: '',
        }
      }
    },

    methods: {
      handleSizeChange(size){
        this.PageNation.size=size
        this.getAll()
      },
      handleCurrentChange(cur){
        this.PageNation.current=cur
        this.getAll()
      },
      handleAdd() {
        axios.post("/books/", this.addForm).then((res) => {
          if (res.data.flg) {
            this.dialogVisible = false
            this.$message({
              message: '添加成功！！',
              type: 'success'
            });
          } else {
            this.$message.error('添加失败');
          }
        }).finally(() => {
          this.getAll()
        })
      },
      restForm() {
        this.addForm = {}
      },
      newitem() {
        this.dialogVisible = true
        this.restForm()
      },
      getAll() {
        if(this.PageNation.pageid!=null){
          this.param="?id="+this.PageNation.pageid;
        }
        if(this.PageNation.pagename!=''){
          this.param+="&cgnName="+this.PageNation.pagename;
        }if(this.PageNation.pageage!=null){
          this.param+="&userId="+this.PageNation.pageage
        }

        axios.get("/books/"+this.PageNation.current+"/"+this.PageNation.size +this.param).then((res) => {
          console.log(res)
          this.userList = res.data.data.records;
          this.PageNation.size=res.data.data.size
          this.PageNation.current=res.data.data.current
          this.PageNation.total=res.data.data.total
        });
      },
      delate(row) {
        this.$confirm('此操作将永久删除该药品记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.delete(`/books/${row.id}`).then((res) => {
            if (res.data.flg) {

            } else {
              this.$message.error('删除失败');
            }
          }).finally(() => {
            this.getAll()
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleupdate(){
        axios.put("/books/",this.addForm).then((res)=>{
          if(res.data.flg){
            this.dialogVisible11=false
            this.$message.success("数据编辑成功")
          }else {
            this.$message.error("数据同步失败")
          }
        })
          .finally(() => {
            this.getAll()
          })
        this.dialogVisible=false
      },
      updata(row){
        axios.get("/books/"+row.id).then((res)=>{
          if(res.data.flg&& res.data.data!=null){
            this.dialogVisible11=true
            this.addForm=res.data.data;
            console.log(this.addForm)
          }else {
            this.$message.error("数据同步失败，自动刷新")
          }

        }).finally(() => {
          this.getAll()
        })
      }

    },
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-form-item {
    width: auto;
  }

  .el-table-column {
    text-align: center;
  }

  .mubtn {
    margin-left: 0px;
  }

  .co {
    position: absolute;

    left: 0px;
  }

  .an {
    top: 5px;
    display: flex;
    padding: 3px;
    margin-left: 10px;
    margin-top: 2px;
  }

  .mo {
    top: 10px;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 60%;
    display: flex;

  }

  /*.input1.input{*/
  /*    width: 30%;*/
  /*    height: 60%;*/
  /*    margin: 5px;*/
  /*}*/
  .input1 {
    width: 30%;
    height: 60%;
    margin: 10px;
    /*margin: auto;*/
  }

  .el-input {
    width: 80%;
    float: left;
  }

  /*.input2{*/
  /*  width: 85%;*/
  /*}*/

  .el-button {
    width: auto;
    height: 38px;
    margin: 6px;

    /*margin-top: 20px;*/
  }

  .el-header {
    background-color: #ecf5fc;
    color: #333;

  }

  .el-footer {
    background-color: #ecf5fc;
    color: #333;
  }

  .el-main {
    background-color: white;
    color: #333;
    text-align: center;
    height: auto;
  }
</style>
